<template>
  <div id="app">
    <!-- 整个页面 -->
    <div class="back">
      <!-- 页面中注册的白色框框 -->
      <div class="Register">
        <!-- 页面中注册的标题 -->
        <div class="title">欢迎来到指南针</div>
        <!-- 用户注册的账号 -->
        <el-form
          :model="registerForm"
          :rules="rules"
          ref="register-Form"
          class="register-Form"
        >
          <el-form-item prop="username">
            <div class="usernumber">
              <img class="tupiao" src="../../../static/user2.png" /><input
                type="text"
                class="Useraccount"
                v-model="registerForm.username"
                placeholder="请输入您的手机号"
              />
            </div>
          </el-form-item>
          <el-form-item prop="password">
            <!-- 用户注册的密码 -->
            <div class="userpwd1">
              <img class="tupiao" src="../../../static/pwd1.png" /><input
                type="password"
                class="userpasword1"
                v-model="registerForm.password"
                placeholder="请输入您的密码"
              />
            </div>
          </el-form-item>
          <el-form-item prop="confirmPassword">
            <!-- 确认用户注册的密码 -->
            <div class="userpwd2">
              <img class="tupiao" src="../../../static/pwd2.png" /><input
                type="password"
                class="userpasword2"
                v-model="registerForm.confirmPassword"
                placeholder="请再次确认您的密码"
              />
            </div>
          </el-form-item>
          <el-form-item>
            <div class="but">
              <!-- 注册的按钮 -->
              <el-button style="width:210px; " type="primary" @click="regiser('register-Form')"
                >注册</el-button
              >
            </div>
          </el-form-item>
        </el-form>

        <!-- 最后的短文 -->
        <div class="SE">
          <span class="SE1">已有账号?</span
          ><a href="javascript:(0)" class="SE2" @click="Jump">立即登录</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { _debounce1 } from "../../public/App";
export default {
  data() {
    var confirmPass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入确认密码！"));
      }
      if (value != this.registerForm.password) {
        return callback(new Error("两次密码输入不一致！"));
      } else {
        callback();
      }
    };
    return {
      QQnumber: "",
      zhuangtai: "",
      formLabelAlign: {},
      // registerForm: {
      //   account_name: "",
      //   againPassword: "",
      //   password: ""
      // },
      registerForm:{
          username:'',
          password:'',
          confirmPassword:''
      },
      rules: {
        username: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/,
            message: "请输入正确的手机号！"
          }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "请输入长度在 6 到 15 个字符的密码！",
            trigger: "blur"
          }
        ],
        confirmPassword: [{ validator: confirmPass, trigger: "blur" }]
      }
    };
  },
  created() {},
  methods: {
    Jump() {
      this.$router.push("/Login");
    },
    //注册接口
    regiser: _debounce1(function(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const data = {
            ...this.registerForm,
            // above_id: window.location.href.match(/(.*)(?=\/\#\/Register)/)[0]
          };
          const [err, res] = await this.$http.request({
            url: "/login_up",
            method: "POST",
            data
          });
          console.log(res.data.result)
          if (err) return;
          console.log(res)
          if(res.data.result=1){
              this.$message({
                 showClose: true,
                 message: '注册成功',
                 type: "success",
                  duration: 1800
               });
               this.$router.push("/Login");
          }
          // switch (res.data.result) {
          //   case "shibai":
          //     for (var key in res.data.tishi) {
          //       this.$message({
          //         showClose: true,
          //         message: "注册失败!" + res.data.tishi[key],
          //         type: "error",
          //         duration: 1800
          //       });
          //       return false;
          //     }
          //     break;
          //   case "success":
          //     this.$message({
          //       showClose: true,
          //       message: "" + res.data.explain,
          //       type: "success",
          //       duration: 1800
          //     });
          //     this.$router.push("/Login");
          //     break;
          //     return;
          // }
        } else {
          return false;
        }
      });
    })
  }
};
</script>

<style lang="stylus" scoped>
@import './Register.styl';
</style>
